<%--
  Created by IntelliJ IDEA.
  User: 78632
  Date: 2022/5/16
  Time: 16:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<html>
<head>
    <title>用户列表</title>
</head>
<body>

<form  action="/toUserList.action" >
    姓名：<input type="text" name="username">
    <input type="submit" value="提交" class="btn btn-lg btn-info">
</form>
<div style="width: 70%">
    <table class="table-bordered" style="align-content: center">
        <thead>
        <th>id</th>
        <th>姓名</th>
        <th>地址</th>
        <th>操作</th>
        </thead>
        <tbody>
        <%--tr 行 td 单元格  items 代表的是存在session中的列表名称--%>
        <c:forEach items="${list}" var="user" varStatus="st">
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.address}</td>
                <td>
                    <a href="${pageContext.request.contextPath}/detail/.action" class="btn btn-warning btn-sm glyphicon glyphicon-edit ">编辑</a>
                        <%--            <a class="btn-warning glyphicon glyphicon-remove">删除</a>--%>
                    <a class="btn-warning glyphicon glyphicon-remove" onclick="del(${user.id})">删除</a>
                </td>
            </tr>

        </c:forEach>
        </tbody>

    <script type="text/javascript">
        function del(id){
            var re =confirm("是否删除");
            if (re==true){
                $.ajax({
                    type:'get',
                    url:'deleteuserById.action',
                    data:{"id":id},
                    success:function (data){
                        if (data.msg=="success"){
                            //    实现跳转
                            location.href="toUserList.action";

                        }else {
                            alert('删除失败')
                        }
                    }
                })
            }
        }
    </script>
    </table>
    <ul class="pagination">
        <li><a href="#">《</a></li>
        <li class="active"><a href="#">1</a></li>
        <li class="disabled"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">》</a></li>
    </ul>
</div>
</body>
</html>
